<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bbq.css">
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入提交后点击，信息会显示在列表中</p>
        <div class="row">
            <span>谁：</span>
            <input  type="text">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input  type="text">
        </div>
        <div class="row">
            <span>说什么：</span>
            <input type="text">
        </div>
        <div class="row">
            <button>提交</button>
        </div>
    </div>
    <style>
        *{
    margin: 0;
    padding: 0;
}
.container{
    width: 400px;
    margin: 0 auto;
}
h1{
    text-align: center;
    padding: 20px 0;
}
p{
    color: #666;
    text-align: center;
    font-size: 14px;
    padding: 10px 0;
}
.row{
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.row span{
    width: 100px;
    line-height: 40px;
}
.row input{
    width: 200px;
    height: 30px;
}
.row button{
    width: 304px;
    height: 40px;
    color: white;
    background-color: orange;
    border: none;
}
.row button:active{
    background-color: #666;

}
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
    </script>
    <script>
        let container=document.querySelector('.container');
        let button=document.querySelector('button');
        button.onclick= function() {
            var edits=document.querySelectorAll('input');
            var from=edits[0].value;
            var to=edits[1].value;
            var message=edits[2].value;
            console.log(from +","+ to +","+ message);
            if(from==''||to==''||message==''){
                return;
            }
            var row=document.createElement('div');
            row.className='row';
            row.innerHTML=from+ '对' + to + '说' + message;
            container.appendChild(row);
            for(var i = 0;i < 3; i++){
                edits[i].value='';
            }
             //发送到服务器
             let data={
                from: from,
                to: to,
                message: message
            };
             $.ajax({
                    //类型
                    type:'post',
                    //路径
                    url:'message',
                    //body
                    data:JSON.stringify(data),
                    contentType:"application/json; charset=utf8",
                    success : function(body){
                        console.log("提交数据成功");
                    } 
                });
        }
        //获取get
        function getMessages(){
            $.ajax({
                type:'get',
                url:'message',
                success: function(body){
                    for(let i=0;i<body.length;i++){
                        let message=body[i];
                        let row=document.createElement('div');
                        row.className='row';
                        row.innerHTML=message.from+"对"+ message.to+"说"+message.message;
                        container.appendChild(row);
                    }
                }
            })
        }
        getMessages();
    </script>
</body>
</html>